<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫码登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            flex-direction: column;
            background-color: #f5f5f5;
        }
        .container {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .qrcode {
            margin-top: 10px;
            width: 250px;
            height: 250px;
        }

    </style>
</head>
<body>
<div class="container">
    <div><img src="/static/images/qq.png" style="width: 100px" ></div>
<!--    <h3 class="status">请使用QQ扫码</h3>-->
    <img class="qrcode" src="data:image/jpeg;base64,{$qrcode}" />
    <div id="countdown" style="display: none; margin-top: 10px;">请刷新当前页面</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    var qrsig = "{$qrsig}";
    var url = '/plugin/qrcode_login/index/listenQq?qrsig=' + qrsig;
    var countdownDuration = 180; // 3分钟 = 180秒
    var countdownInterval; // 存放setInterval返回的ID，以便可以清除它
    function startCountdown() {
        countdownInterval = setInterval(function () {
            countdownDuration--;
            if (countdownDuration <= 0) {
                clearInterval(countdownInterval);
                $('#countdown').show();
                // 这里可以加入自动刷新二维码的逻辑，比如调用refreshQRCode()函数
                // refreshQRCode();
            }
        }, 1000); // 每秒更新一次倒计时
    }

    $(document).ready(function () {
        startCountdown(); // 页面加载后开始倒计时

        setInterval(function () {
            $.ajax({
                type: "GET",
                url: url,
                success: function (res) {
                    var statusElem = $('#status'); // 注意这里应该使用ID选择器，除非您的.status元素有一个ID
                    if (res.msg == '登录成功') {
                        window.location.href = document.referrer; // 返回上一页并刷新
                    } else if (res.msg == '二维码已失效') {
                        // 刷新二维码
                        // refreshQRCode(); // 假设您有这个函数
                        $('#status').text('二维码已失效，请重新扫码'); // 这里应该显示消息，但可能需要一个可见的.status元素
                        clearInterval(countdownInterval); // 清除倒计时
                        startCountdown(); // 重新开始倒计时
                    } else if (res.msg == '正在验证二维码') {
                        $('#status').text('正在进行登录验证'); // 同样需要一个可见的.status元素或改为其他方式显示消息
                    }
                },
                error: function () {
                    // 这里处理请求失败的情况，比如显示错误消息或重试等
                }
            });
        }, 2000); // 每2秒检查一次登录状态
    });
</script>
</body>
</html>